import React from 'react';
import { Button } from 'antd';
import { WeaDialog, WeaTable as WeaTableSelf, WeaLocaleProvider } from 'ecCom';
import { toJS } from 'mobx';
import { observer } from 'mobx-react';
import isEmpty from 'lodash/isEmpty';
import forEach from 'lodash/forEach';

const getLabel = WeaLocaleProvider.getLabel;

@observer
class CrmLogDetailDialog extends React.Component {
  constructor(props) {
    super(props);
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.visible && nextProps.visible != this.props.visible) {
      this.init(nextProps);
    }
  }

  componentDidMount() {
    if (this.props.visible) {
      this.init(this.props);
    }
  }

  init(nextProps) {
    const {
      logStore,
      logType,
      logSmallType,
      targetId,
    } = nextProps;
    logStore.update({
      logType,
      logSmallType,
      targetId,
      detailVisible: false,
    });
  }

  formatContent(record) {
    // console.log(record);
    let temp = '';
    let newValues = {};
    let oldValues = {};
    if (record.newValues) {
      try {
        newValues = JSON.parse(record.newValues);
      } catch (error) {
        newValues = record.newValues;
      }
    }
    if (record.oldValues) {
      try {
        oldValues = JSON.parse(record.oldValues);
      } catch (error) {
        oldValues = record.oldValues;
      }
    }
    // console.log(newValues,oldValues);
    if (!isEmpty(newValues) || !isEmpty(oldValues)) {
      const target = isEmpty(newValues) ? oldValues : newValues;
      temp += '<ol style=\'list-style: decimal; margin-left: 20px\'>';
      forEach(target, (value, key) => {
        temp += `<li style='margin-bomtto: 4px'>[${key}]:&nbsp;`;
        if (oldValues[key] !== undefined && newValues[key] !== undefined) {
          temp =
                        `${temp +
                        getLabel('385867', '由&nbsp;"$s"修改为&nbsp;').replace(
                          /\$s/,
                          oldValues[key],
                        )
                        }"<span style='color: #FF0000'>${newValues[key]}</span>"</li>`;
        } else {
          temp += `${value}</li>`;
        }
      });
      temp += '</ol>';
    }
    return temp;
  }

  formatParams(record) {
    let text = '';
    if (!isEmpty(record.params)) {
      text = `<pre><code>${JSON.stringify(
        JSON.parse(record.params),
        null,
        2,
      )}</code></pre>`;
    }
    return text;
  }

  render() {
    const {
      logStore,
      icon,
      iconBgcolor,
      title,
      className = '',
      style,
    } = this.props;
    const buttons = [];
    if (logStore.showParams) {
      buttons.push(
        <Button
          ecId={`${this && this.props && this.props.ecId || ''}_Button@up0xve@back`}
          key="clear"
          type="ghost"
          onClick={() => logStore.setShowParams(false)}
        >
          {getLabel('385865', '返 回')}
        </Button>,
      );
    } else {
      buttons.push(
        <Button
          ecId={`${this && this.props && this.props.ecId || ''}_Button@haclcu@view`}
          key="submit"
          type="primary"
          onClick={() => logStore.setShowParams(true)}
        >
          {getLabel('385866', '查看原始参数')}
        </Button>,
      );
    }
    const temp = this.formatContent(toJS(logStore.detailRecord));
    const text = this.formatParams(toJS(logStore.detailRecord));

    return (

      <WeaDialog
        ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@jw8eti`}
        scalable
        hasScroll
        key={logStore.detailKey}
        onCancel={() => logStore.setDetailVisible(false)}
        title={<div dangerouslySetInnerHTML={{ __html: `${logStore.detailTitle}` }} /> || getLabel('31709', '日志查看')}
        icon={icon || 'icon-coms-crm'}
        iconBgcolor={iconBgcolor || '#96358a'}
        visible={logStore.detailVisible}
        style={{ width: 800, height: 480 }}
        buttons={buttons}
        className="wea-log-view-detail"
        {...this.props}
      >
        {((!logStore.showParams && temp !== '') ||
                    (logStore.showParams && text !== '')) && (
            <React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_undefined@s7pzs0`}>
                      <div
                style={{ padding: 20, overflowX: 'scroll' }}
                dangerouslySetInnerHTML={{
                  __html: !logStore.showParams ? temp : text,
                }}
              />
                      <br />
                      <br />
                    </React.Fragment>
          )}
        {/* {!isEmpty(toJS(logStore.viewdetailDatas)) &&
                    toJS(logStore.viewdetailDatas).map((datas, index) => {
                        return (
                            <div style={{ paddingTop: "15px" }}>
                                <div
                                    style={{
                                        padding: "0 0 8px 12px",
                                        borderBottom: "1px solid #e2e2e2"
                                    }}
                                >
                                    {toJS(logStore.viewdetailTitles)[index] == "@#"
                                        ? ""
                                        : toJS(logStore.viewdetailTitles)[index] + ":"}
                                </div>
                                {toJS(logStore.viewdetailColums).length > 0 &&
                                    !isEmpty(toJS(logStore.viewdetailColums[index])) && (
                                        <WeaTableSelf
                                            columns={toJS(logStore.viewdetailColums[index])}
                                            dataSource={toJS(datas)}
                                            pagination={false}
                                            scroll={{ x: 993, y: 700 }}
                                        />
                                    )}
                            </div>
                        );
                    })} */}
      </WeaDialog>
    );
  }
}


export default CrmLogDetailDialog;
